<template>
  <div class="financial-info">
    <div class="box">
      <el-form
        inline
        label-width="166px"
        :rules="companyFinanceRules"
        :disabled="isInfoEdit"
        ref="financeFormName"
        class="base-form"
        :model="financeFormData"
      >
        <el-row v-for="(item, index) in companyFinanceInfo" :key="index">
          <el-col :span="it.span" v-for="(it, idx) in item" :key="idx">
            <el-form-item :label="it.label" :prop="it.prop">
              <el-input
                v-if="it.type === 'autocomplete'"
                v-model="financeFormData[it.prop]"
                :placeholder="it.placeholder"
                :disabled="isEditItem(it)"
              />
              <el-select
                v-else-if="it.type === 'searchSelect'"
                v-model="financeFormData[it.prop]"
                filterable
                remote
                clearable
                reserve-keyword
                :placeholder="it.placeholder"
                :loading="loading"
                :remote-method="remoteMethod"
               >
                <el-option
                  v-for="item in branchNames"
                  :key="item.label"
                  :label="item.value"
                  :value="item.value">
                </el-option>
              </el-select>
              <el-input
                v-else-if="it.type === 'input'"
                v-model="financeFormData[it.prop]"
                :placeholder="it.placeholder"
                :disabled="isEditItem(it)"
              />
              <el-select
                v-else-if="
                  it.type === 'select' && it.otherProp === 'invoiceType'
                "
                v-model="financeFormData[it.prop]"
                :placeholder="it.placeholder"
              >
                <el-option
                  v-for="itm in invoiceType"
                  :key="itm.value"
                  :label="itm.label"
                  :value="itm.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>
<script>
import {
  getAcCompanyFinanceNew,
  updateAcCompanyFinanceNew
} from '@const/api_auth.js'
import {
  getBranchNameList
} from '@const/api_interface.js'
export default {
  name: 'FinancialInfo',
  data() {
    return {
      isInfoEdit: false,
      invoiceType: [
        {label: '一般纳税人增值税发票', value: '0'},
        {label: '小规模普票', value: '1'}
      ],
      companyFinanceInfo: [
        [
          {
            prop: 'companyName',
            span: 16,
            placeholder: '请输入',
            label: '公司名称',
            type: 'autocomplete'
          },
          {
            prop: 'billingType',
            span: 8,
            placeholder: '请输入',
            label: '开票类型',
            type: 'select',
            otherProp: 'invoiceType'
          }
        ],
        [
          {
            prop: 'vatInvoiceAddress',
            span: 16,
            placeholder: '请输入',
            label: '公司地址(与发票一致)',
            type: 'input'
          },
          {
            prop: 'invoiceRegistrationTelephone',
            span: 8,
            placeholder: '请输入',
            label: '电话号码(与发票一致)',
            type: 'input'
          }
        ],
        [
          {
            prop: 'accountBankName',
            span: 16,
            placeholder: '请输入',
            label: '对公账户开户银行',
            type: 'input'
          },
          {
            prop: 'accountSubbranchBankName',
            span: 16,
            placeholder: '请输入',
            label: '对公账户开户支行',
            type: 'searchSelect'
          },
          {
            prop: 'publicAccountNumber',
            span: 8,
            placeholder: '请输入',
            label: '银行账号',
            type: 'input'
          }
        ],
        [
          {
            prop: 'financeLinkMan',
            span: 8,
            placeholder: '请输入',
            label: '财务联系人',
            type: 'input'
          },
          {
            prop: 'phone',
            span: 8,
            placeholder: '请输入',
            label: '财务电话',
            type: 'input'
          },
          {
            prop: 'email',
            span: 8,
            placeholder: '请输入',
            label: '财务邮箱',
            type: 'input'
          }
        ],
        [
          {
            prop: 'invoiceReceiver',
            span: 8,
            placeholder: '请输入',
            label: '发票收件人',
            type: 'input'
          },
          {
            prop: 'invoiceReceiverPhone',
            span: 8,
            placeholder: '请输入',
            label: '发票收件人电话',
            type: 'input'
          },
          {
            prop: 'invoiceReceiverEmail',
            span: 8,
            placeholder: '请输入',
            label: '发票收件人邮箱',
            type: 'input'
          }
        ],
        [
          {
            prop: 'invoiceMailingAddress',
            span: 16,
            placeholder: '请输入',
            label: '发票邮寄地址',
            type: 'input'
          },
          {
            prop: 'unifiedSocialCreditCode',
            span: 8,
            placeholder: '请输入',
            label: '统一社会信用代码',
            type: 'input'
          }
        ],
        // [
        //   {
        //     prop: 'privateBankAccountName',
        //     span: 8,
        //     placeholder: '请输入',
        //     label: '对私账户开户行',
        //     type: 'input'
        //   },
        //   {
        //     prop: 'privateBankAccount',
        //     span: 8,
        //     placeholder: '请输入',
        //     label: '对私账号',
        //     type: 'input'
        //   }
        // ]
      ],
      companyFinanceRules: {
        companyName: [
          {required: true, message: '请输入公司名称', trigger: 'blur'}
        ],
        billingType: [
          { required: true, message: '请输入开票类型', trigger: 'blur' }
        ],
        vatInvoiceAddress: [
          { required: true, message: '请输入公司地址', trigger: 'blur' }
        ],
        invoiceRegistrationTelephone: [
          { required: true, message: '请输入电话号码(与发票一致)', trigger: 'blur' }
        ],
        accountBankName: [
          { required: true, message: '请输入对公账户开户银行', trigger: 'blur' }
        ],
        accountSubbranchBankName: [
          { required: true, message: '请输入对公账户开户支行', trigger: 'change' }
        ],
        publicAccountNumber: [
          { required: true, message: '请输入银行账号', trigger: 'blur' }
        ],
        financeLinkMan: [
          { required: true, message: '请输入财务联系人', trigger: 'blur' }
        ],
        phone: [
          { required: true,
            // pattern: /^1[345678]\d{9}$/,
            message: '请正确填写联系电话',
            trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入财务email', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
        ],
        invoiceReceiver: [
          { required: true, message: '请输入发票收件人', trigger: 'blur' }
        ],
        invoiceReceiverPhone: [
          { required: true,
            // pattern: /^1[345678]\d{9}$/,
            message: '请正确填写联系电话',
            trigger: 'blur' }
        ],
        invoiceReceiverEmail: [
          { required: true, message: '请输入发票收件人邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
        ],
        invoiceMailingAddress: [
          { required: true, message: '请输入发票邮寄地址', trigger: 'blur' }
        ],
        unifiedSocialCreditCode: [
          {required: true, message: '请输入统一社会信用代码', trigger: 'blur'}
        ]
      },
      financeFormData: {
        financeLinkMan: '', // 财务联系人
        phone: '', // 财务联系人电话
        email: '', // 财务联系人邮箱
        invoiceReceiver: '', // 发票收件人
        invoiceReceiverPhone: '', // 发票收件人电话
        invoiceReceiverEmail: '', // 发票收件人邮箱
        invoiceMailingAddress: '', // 发票邮寄地址
        taxId: '', // 税务登记号
        accountBankName: '', // 对公开户行
        accountSubbranchBankName: '', // 对公账户开户支行
        publicAccountNumber: '', // 对公账号
        billingType: '', // 开票类型
        companyName: '', // 公司名称
        taxIdentificationNumber: '', // 纳税识别号
        invoiceRegistrationTelephone: '', // 发票注册电话
        bankAccount: '', // 银行账号
        vatInvoiceAddress: '', // 增值税发票地址
        unifiedSocialCreditCode: '' // 社会统一信用代码
      }, // 财务表单
      timeout:  null,
      branchNames: [],
      loading: false
    }
  },
  created() {
    this._initGlobalBtn()
    this.getCompanyFinancialInfo()
  },
  methods: {
    _initGlobalBtn() {
      let obj = {}
      obj = {
        type: 'btn',
        arr: [{type: 'primary', val: '保存', handle: this.globalSubmitSave}]
      }
      this.$store.commit('changeLayoutHandle', obj)
    },
    // 某个字段是否允许编辑
    isEditItem(it) {
      // if (this.$route.query.approveStatus && this.$route.query.approveStatus.toString() === '1') {
      if (
        ['fullName', 'companyName', 'unifiedSocialCreditCode'].includes(it.prop)
      ) {
        return true
        // } else {
        //   return false
        // }
      }
    },
    // 通过企业code获取企业信息
    getCompanyFinancialInfo() {
      let companyId = this.$store.state.companyId
      this.$axios({
        methods: 'get',
        url: getAcCompanyFinanceNew,
        params: {
          id: companyId
        }
      }).then(res => {
        let result = res.data.payload
        if (result) {
          this.financeFormData = result
        }
      })
    },
    globalSubmitSave() {
      this.$refs['financeFormName'].validate(valid => {
        if (valid) {
          this.$axios({
            method: 'post',
            url: updateAcCompanyFinanceNew,
            data: this.financeFormData
          }).then(res => {
            if (res.data.payload && res.data.code === '0') {
              this.$message({type: 'success', message: '保存成功！'})
            }
          })
        }
      })
    },
    remoteMethod(query) {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.$axios({
            methods: 'get',
            url: getBranchNameList,
            params: {
              branchName: query || ''
            }
          }).then(res => {
            let results =  res.data &&  res.data.payload &&  res.data.payload.content
            if (results) {
              results.map(item => {
                item['label'] = item.id
              })
              this.branchNames = results
            }
          })
        }, 100);
    }
  }
}
</script>
<style lang="less">
.financial-info {
  .box {
    background: #fff !important;
    margin-bottom: 20px;
    .el-form-item {
      display: flex;
      .el-form-item__content {
        flex: 1;
        .el-date-editor {
          width: 100%;
        }
        .el-select {
          width: 100%;
        }
        .el-autocomplete {
          width: 100%;
        }
      }
    }
    // 其他特殊属性
    .line-height {
      .el-form-item__label {
        line-height: 16px;
      }
    }
  }
}
</style>
